<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(v, i) in cartList" :key="i" :right-options="options" @click="bindClick($event, v)">
				<list-item :item="v">
					<view slot="desc">
						<uni-number-box :value="v.count" @change="change($event, v)" :min="1"></uni-number-box>
						<view class="sku">
							颜色： <text>{{ v.sku.color }}</text>
							尺寸： <text>{{ v.sku.size }}</text>
						</view>
					</view>
					<view slot="preLeft">
						<label class="radio">
							<radio :checked="v.state" @click="changeStateCart(v)" /><text></text>
						</label>
					</view>
				</list-item>
			</uni-swipe-action-item>
		</uni-swipe-action>
		
		<!-- 底部提交 -->
		<van-submit-bar
		  :price="totalPrice * 100"
		  button-text="提交订单"
		  bind:submit="onClickButton"
		  :tip="true"
		  
		>
			<van-checkbox :value="allState" @change="onChange" checked-color="#07c160">全选</van-checkbox>
		</van-submit-bar>


	</view>

</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import tabBarMixins from '../../mixins/tabBar-mixins.js'
	export default {
		mixins: [tabBarMixins],
		watch: {
			totalCount(newValue) {
				uni.setTabBarBadge({
					index: 2,
					text: newValue.toString()
				})
			}
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000'
					}
				}]
			};
		},
		computed: {
			...mapState('cart', ['cartList']),
			...mapGetters('cart', ['allState', 'totalPrice', "totalCount"])
		},
		methods: {
			...mapMutations('cart', ['changeCountCart', 'changeStateCart', 'deleteCart', "changeAllState"]),
			change(value, v) {
				console.log(value)
				this.changeCountCart({
					id: v.id,
					sku: v.sku,
					count: value
				})
			},
			bindClick(e, v) {
				// 删除
				if(e.index === 0) {
					this.deleteCart(v)
				}
			},
			onChange() {
				this.changeAllState(!this.allState)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sku {
		font-size: 24rpx;

		text {
			color: red;
			font-weight: bold;
		}
	}
</style>